<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <button @click="getHandler">get</button>
        <button @click="postHandler">post</button>
    </div>
</body>
<script>
    // Axios 是什么?
    // Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

    // 特性
    // 从浏览器创建 XMLHttpRequests
    // 从 node.js 创建 http 请求
    // 支持 Promise API
    // 拦截请求和响应
    // 转换请求和响应数据
    // 取消请求
    // 自动转换JSON数据
    // 客户端支持防御XSRF

    // axios使用教程
    // 1. 先下载  (npm  CDN)
    // 2. 在引入
    // 3. 在使用

    // axios(config)

    // 请求配置 => config
    // method  请求的方式
    // baseUrl 请求的基路径 一般会拼接到url之前,前提url不是绝对路径( http / https)
    // url     请求的地址
    // header  自定义头信息
    // params  get传参
    // data    post传参
    // responseType  响应数据类型
    // transformRequest: [function (data, headers) {  // `transformRequest` 允许在向服务器发送前，修改请求数据 
    //     对发送的 data 进行任意转换处理
    // 
    // 
    //     return data;
    //  }],

    //  transformRequest: [function (data, headers) {   `transformResponse` 在传递给 then/catch 前，允许修改响应数据
    //     // 对发送的 data 进行任意转换处理

    //     return data;
    // }],

    // 响应结构 => axios请求有结果之后默认返回响应对象 (100 200 300 400 500)
    // {
    //     // `data` 由服务器提供的响应
    //     data: { },

    //     // `status` 来自服务器响应的 HTTP 状态码
    //     status: 200,

    //     // `statusText` 来自服务器响应的 HTTP 状态信息
    //     statusText: 'OK',

    //         // `headers` 是服务器响应头
    //         // 所有的 header 名称都是小写，而且可以使用方括号语法访问
    //         // 例如: `response.headers['content-type']`
    //         headers: { },

    //     // `config` 是 `axios` 请求的配置信息
    //     config: { },

    //     // `request` 是生成此响应的请求
    //     // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
    //     // 在浏览器中则是 XMLHttpRequest 实例
    //     request: { }
    // }



    console.log(axios); // 全局函数


    new Vue({
        el: "#app",
        data: {
            getParams: {
                wd: "",
                col: "id",
                type: "asc",
                page: 1,
                size: 10,
            },
            postParams: {
                id: "1742",
                ch: 55,
                mh: 66,
                eh: 77,
            }
        },
        methods: {
            getHandler() {
                // var config = {
                //     method: "get",
                //     baseURL: "http://121.43.116.41/demo/php",
                //     url: "/searchGradeOrderLimit.php",
                //     params: this.getParams,
                //     responseType:"json"
                // }
                axios({
                    method: "get",
                    baseURL: "http://121.43.116.41/demo/php",
                    url: "/searchGradeOrderLimit.php",
                    params: this.getParams,
                    responseType: "json",

                }).then(response => {
                    console.log("请求有结果", response);
                    if (response.status == 200) {
                        return response.data; // 请求成功是返回响应数据
                    } else {
                        var err = new Error("请求失败");
                        throw err;    // 请求失败抛出错误
                        // return Promise.reject(err); // 返回失败状态的Promise实例
                    }
                }).then((data) => {
                    console.log("响应数据", data);
                }).catch(err => {
                    console.log("请求失败", err);
                })
            },
            postHandler() {
                axios({
                    method: "post",
                    baseURL: "http://121.43.116.41/demo/php",
                    url: "/updateGradeById.php",
                    responseType: "json",
                    data: this.postParams,
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded"
                    }
                }).then(response => {
                    console.log("请求有结果", response);
                    if (response.status == 200) {
                        return response.data; // 请求成功是返回响应数据
                    } else {
                        var err = new Error("请求失败");
                        throw err;    // 请求失败抛出错误
                        // return Promise.reject(err); // 返回失败状态的Promise实例
                    }
                }).then((data) => {
                    console.log("响应数据", data);
                }).catch(err => {
                    console.log("请求失败", err);
                })
            }
        },
    })

</script>

</html>